<template>
  <div class="app-container">


    <el-form :model="searchForm" ref="queryForm" size="small" :inline="true"   label-width="68px">
      <el-form-item label="姓名" prop="name">
        <el-input   placeholder="请输入姓名"   clearable    />
      </el-form-item>


      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="search">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="toAdd">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <!--      <el-table-column align="center" prop="itemId" label="Id" width="95">  </el-table-column>-->
      <el-table-column align="center" type="index" label="序号" >  </el-table-column>
      <el-table-column align="center" prop="type" label="类型"  >  </el-table-column>
      <el-table-column align="center" prop="typeName" label="类型名称"  >  </el-table-column>
      <el-table-column align="center" prop="code" label="代码"  >  </el-table-column>
      <el-table-column align="center" prop="cation" label="名称"  >  </el-table-column>
      <el-table-column align="center"  label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="toEdit(scope.row.itemId)" >修改</el-button>
          <el-button type="waring" size="mini"  @click="deleteById(scope.row.itemId)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>


    <el-pagination
      background
      @current-change="fetchData()"
      layout="prev, pager, next,sizes"
      :page-sizes="[5, 10, 20, 50]"
      :current-page.sync="searchForm.pageNo"
      :page-size.sync="searchForm.size"
      :total="searchForm.total">
    </el-pagination>

    <el-dialog :visible.sync="visible" :title="dialogTitle">    <!-- x-->
      <Edit v-if="visible" :visible.sync="visible" @close="close" :id="id"></Edit>
    </el-dialog>


  </div>
</template>

<script>
import { getList ,deleteById } from '@/api/common/constatnts_item'
import Edit from './edit.vue'
export default {
  components:{Edit},
  data() {
    return {
      dialogTitle:'',
      searchForm:{
        pageNo:1,
        size:10,
        total:0,
        dname:''
      },
      id:'',
      visible:false,
      list: null,
      listLoading: true
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    search(){
      this.fetchData()
    },
    close(){
      this.fetchData()
    },
    toEdit(id){
      this.dialogTitle ="修改常数项目";
      this.visible = true;
      this.id = id
    },
    toAdd(id){
      this.dialogTitle ="添加常数项目";
      this.visible = true;
      this.id = null;
    },
    fetchData() {
      this.listLoading = true
      let param = {
        pageNo:this.searchForm.pageNo,
        size:this.searchForm.size,
        dname:this.searchForm.dname
      }



      getList(param).then(page => {
        this.list = page.data;

        let {total ,pages,size,pageNo} = page;
        this.searchForm.total = total

        this.listLoading = false
      })
    },
    deleteById(id){
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteById(id).then(success=>{
          if(success){
            this.$message.success("保存成功");
            this.fetchData()//加载列表
          }else{
            this.$message.error("保存失败");
          }
        });
      })

    }
  }
}
</script>
